<template>
  <div class="swiper-container" ref="root">
    <slot name="swiper-start"></slot>

    <div class="swiper-wrapper">
      <slot></slot>
    </div>

    <div class="swiper-pagination"
      ref="pagination"
      v-if="isEnabledPagination"
    ></div>

    <div class="swiper-navigation swiper-button-prev"
      ref="navigationPrev"
      v-if="isEnabledNavigation"
    ></div>
    <div class="swiper-navigation swiper-button-next"
      ref="navigationNext"
      v-if="isEnabledNavigation"
    ></div>

    <div class="swiper-scrollbar"
      ref="scrollbar"
      v-if="isEnabledScrollbar"
    ></div>

    <slot name="swiper-end"></slot>
  </div>
</template>

<script>
import {defineComponent} from 'vue';
import _ from 'lodash';
import Swiper from 'swiper/bundle';
import 'swiper/css/bundle';

export default defineComponent({
  name: 'ArkSwiperContainer',
  props: {
    options: {
      type: Object,
    }
  },
  data() {
    return {
      swiperInstance: {},
      optionsVariable: {
        // 更新当前元素或子元素则Swiper重新初始化
        observer: true,
        // 抓取图标
        grabCursor: true,
        // 鼠标滚轮滚动
        mousewheel: true,
        // 子元素间距
        spaceBetween: 12,
      },
    };
  },
  computed: {
    isEnabledPagination() {
      return this.checkModuleEnabled(this.options.pagination);
    },
    isEnabledNavigation() {
      return this.checkModuleEnabled(this.options.navigation);
    },
    isEnabledScrollbar() {
      return this.checkModuleEnabled(this.options.scrollbar);
    },
  },
  mounted() {
    this.init();
  },
  beforeUnmount() {
    this.swiperInstance?.destroy();
  },
  methods: {
    init() {
      // 根据传入options初始化optionsVariable
      const options = _.cloneDeep(this.options);
      const optionsVariable = _.cloneDeep(this.optionsVariable);
      this.optionsVariable = _.defaultsDeep(options, optionsVariable);

      // 初始化分页配置
      if (this.isEnabledPagination) {
        const el = this.$refs.pagination;
        const pagination = {el};
        this.optionsVariable['pagination'] = _.defaultsDeep(pagination, this.optionsVariable['pagination']);
      }

      // 初始化导航配置
      if (this.isEnabledNavigation) {
        const {navigationPrev, navigationNext} = this.$refs;
        const navigation = {
          prevEl: navigationPrev,
          nextEl: navigationNext,
        };
        this.optionsVariable['navigation'] = _.defaultsDeep(navigation, this.optionsVariable['navigation']);
      }

      // 初始化滚动配置
      if (this.isEnabledScrollbar) {
        const el = this.$refs.scrollbar;
        const scrollbar = {el};
        this.optionsVariable['scrollbar'] = _.defaultsDeep(scrollbar, this.optionsVariable['scrollbar']);
      }

      // 初始化Swiper
      const el = this.$refs.root;
      this.swiperInstance = new Swiper(el, this.optionsVariable);
    },
    checkModuleEnabled(option) {
      if (typeof option === 'boolean') {
        return option;
      }

      if (typeof option === 'object') {
        return option.enabled;
      }

      return false;
    },

    // 供外部调用，内部未使用
    getSwiperInstance() {
      return this.swiperInstance;
    },
  },
});
</script>

<style scoped>
.swiper-container {
  @apply h-full w-full min-h-full min-w-full overflow-hidden;

  .swiper-navigation {
    @apply w-[52px] h-[52px] justify-center items-center bg-[#00000033] rounded-[50%];
    transition: transform 0.5s ease-in, opacity 0.7s cubic-bezier(0.15, 0, 0.2, 1) 0.1s;

    &::after {
      @apply text-[24px] text-[#FFFFFFD8] font-extrabold;
    }

    &:hover {
      @apply bg-[#00000047];
    }

    &:active {
      @apply bg-[#0000005B];
    }
  }

  .swiper-button-prev {
    &::after {
      @apply pr-[5px];
    }
  }

  .swiper-button-next {
    &::after {
      @apply pl-[5px];
    }
  }

  .swiper-button-disabled {
    @apply opacity-0 scale-[0.8];
  }
}
</style>
